<template>
	<!-- svg icon -->
	<el-popover
		ref="popoverRef"
		popper-class="popover-svg-box"
		:virtual-ref="virtualRef"
		placement="bottom-end"
		trigger="click"
		width="400px"
		virtual-triggering
	>
		<div class="svg-box">
			<div class="svg-input-box">
				<el-input v-model="inputValue" placeholder="搜索" clearable :prefix-icon="Icons.Search" />
			</div>
			<el-tabs v-model="activeName" class="svg-tabs" @tab-click="handleClick">
				<el-tab-pane v-for="(item, index) in dict.icon_type.value" :key="index" :label="item.label" :name="item.value">
					<el-scrollbar v-if="Object.keys(iconsList).length">
						<div class="icon-box">
							<div v-for="name in iconsList" :key="name" class="icon-item" @click="selectIcon(name)" :span="4">
								<SvgIcon
									v-if="dict.icon_type.isSvgCustom(item.value)"
									:name="name"
									:iconStyle="{ width: iconSize, height: iconSize }"
								/>
								<component
									v-else-if="dict.icon_type.isSvgElement(item.value)"
									:is="name"
									:style="{ width: iconSize }"
								></component>
								<div class="icon-name">{{ name }}</div>
							</div>
						</div>
					</el-scrollbar>
					<el-empty description="未搜索到您要找的图标~" v-else />
				</el-tab-pane>
			</el-tabs>
		</div>
	</el-popover>
</template>

<script setup lang="ts" name="PopoverColSetting">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { ref, Ref, unref, computed, watch } from 'vue'
import ids from 'virtual:svg-icons-names'
import * as Icons from '@element-plus/icons-vue'
import dict from '@/utils/dict/index'
const props = defineProps<{ iconValue: string; iconType: string; virtualRef: any }>()
// iconSize
const iconSize = ref('1.5rem')
// svg 切换
const activeName = ref(props.iconType)
const handleClick = (tab: any, event: Event) => {
	console.log(tab, event)
}

//全局自定义svg
const customSvgList: Array<string> = []
ids.forEach(element => {
	customSvgList.push(element.replace(/icon-/g, ''))
})
let elementSvgList: Array<string> = []
for (const name in Icons) {
	elementSvgList.push(name)
}
let svgList: Ref<Array<string>> = ref([])
// 监听切换数据

watch(
	activeName,
	val => {
		if (val === 'svgCustom') {
			svgList.value = customSvgList
		} else if (val === 'svgElement') {
			svgList.value = elementSvgList
		}
		console.log(val, svgList)
	},
	{ immediate: true }
)

const popoverRef = ref()

// 监听搜索框值
const inputValue = ref('')
const iconsList = computed((): { [key: string]: any } => {
	console.log('inputValue.value', inputValue.value, svgList.value)
	if (!inputValue.value) return svgList.value
	let result: Array<string> = []
	svgList.value.forEach(element => {
		if (element.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result.push(element)
	})
	return result
})
const emit = defineEmits(['update:iconValue', 'update:iconType'])
// 选择图标(触发更新父组件数据)
const selectIcon = (item: any) => {
	emit('update:iconValue', item)
	emit('update:iconType', activeName.value)
	console.log('item', item, 'activeName', activeName.value)
}

const onClickOutside = () => {
	console.log('popoverRef', unref(popoverRef).popperRef)
	unref(popoverRef).popperRef?.delayHide?.()
}

defineExpose({
	onClickOutside
})
</script>
<style scoped lang="scss">
.svg-box {
	display: flex;
	flex-direction: column;
	height: 400px;
	overflow: hidden;
	.svg-tabs {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}
}
.svg-input-box {
	padding: 0 12px;
}
.icon-box {
	display: grid;
	grid-template-columns: repeat(auto-fill, 110px);
	justify-content: space-evenly;
	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10px;
		cursor: pointer;
		&:hover {
			color: var(--el-color-primary);
		}
		.icon-name {
			margin-top: 5px;
		}
	}
}
</style>
<style>
.popover-svg-box {
	padding: 12px 0 !important;
}
.popover-svg-box .el-tabs__nav-wrap {
	padding: 0 12px !important;
}
.popover-svg-box .el-tab-pane {
	height: 100%;
}
.popover-svg-box .el-scrollbar__view > div {
	padding: 0 12px !important;
}
</style>
